// React 核心包
import React from 'react'
// 渲染 React 代码到页面上
import { createRoot } from 'react-dom/client'

/* const list = (
  <ul>
    <li>Vue</li>
    <li>React</li>
    <li>Angular</li>
  </ul>
) */

/* const arr = ['Vue', 'React', 'Angular']
const list = (
  <ul>
    <li>{arr[0]}</li>
    <li>{arr[1]}</li>
    <li>{arr[2]}</li>
  </ul>
) */

/* const arr = ['Vue', 'React', 'Angular']
const list = (
  <ul>{[<li>{arr[0]}</li>, <li>{arr[1]}</li>, <li>{arr[2]}</li>]}</ul>
) */

// !问题：上面 2 种写法不具有普遍性，如果有 1000 条数据呢？

const arr = ['Vue', 'React', 'Angular', 'xxx', 'yyy']

// map 在 React 是使用频率最高的方法，没有之一
// const tempArr = arr.map((item) => <li>{item}</li>)

// const tempArr = [<li>Vue</li>, <li>React</li>, <li>Angular</li>]

// Vue => :key="index"

// key => React 内部为了进行 VNode Diff 的时候，快速找到变更的那个 Node，按需更新，性能
// key => 加哪里？直接循环的是谁，就加谁上

// 换行了建议加小括号
const list = (
  <ul>
    {/* 大括号 {}，里面表示要写表达式了 */}
    {/* {arr.map((item, index) => (
      <li key={index}>
        <span>{item}</span>
      </li>
    ))} */}
    {arr.map((item, index) => {
      return <li key={index}>{item}</li>
    })}
  </ul>
)

// createRoot(渲染到哪儿).render(渲染谁)
createRoot(document.querySelector('#root')).render(list)
